//@ts-ignore 
import * as echarts from "../../components/ec-canvas/echarts"; //引入外部的js工具类
import {getChartData} from '../../api/work_order'
import { LENGYU_SUCCESS_CODE } from "../../utils/request";

function hasProperty<T, K extends keyof T>(obj: T, key: K): obj is T & Record<K, unknown> {
  return key in obj;
}

function setBarOption(chart:any, characters:any) {
  let xdata:string[]=[];
  let ydata:any=[]
 if(characters){
   characters.forEach(element => {
      xdata.push(element.name)
      let tmpYData = {
        value:element.count
      }
      ydata.push(tmpYData)
   });
 }
 console.log(xdata)
 console.log(ydata)
  const option = {
      title: {
          // text: dataType,
          padding: [10, 0, 0, 20],
          textStyle: {
              fontSize: 14,
              color: '#696969'
          },
          top: '10rpx'
      },
      legend:{
        show:true
        // left: '200px',
        // right: '200px%',
        // width:'30%'
      },
      backgroundColor: "#fff",
      color: ["#006EFF", "#67E0E3", "#9FE6B8"],
      animation: false,
      grid: {
          show: true,
          left:'20%'
      },
      yAxis: {
          type: 'value',
          data: ydata,      //x轴上的数据是动态的，所以我作为参数传进来
          axisLabel: {
              fontSize: 10,
              // formatter: function (value:any) {
              //     if(value){
              //       var val = value.split("-")[0]
              //       return val
              //     }
              // },
          }
      },
      xAxis: {
          type: 'category',
          x: 'center',
          data: xdata, 
          scale: true,
          min: 0,
          axisLabel: {
          }
      },
      series: [{
          type: 'bar',
          data: ydata,  
          symbol: 'none',
          label: {
            show: true, // 显示标签
            position: 'inside', // 标签显示在柱子顶部,
            // formatter: function (value:any) {
            //   if(dataType == "dps" || dataType=="hps"){
            //       var val = (value.data.value / 10000).toFixed(2) + 'W';
            //       return val
            //   }
            // }
          },
          lineStyle: {
              width: 1
          },
          barMinHeight:'80',
          barWidth:'70%'
      }]
  };
  chart.setOption(option)
}

function setPieOption(chart:any, characters:any,title:string) {
  let data:any=[]
  let color:string[]=[]
 if(characters){
   characters.forEach(element => {
     if(element.name){
      let tmpYData = {
        value:element.count,
        name:element.name
      }
      if(element.name=="待处理"){
        color.push("#9FE6B8")
      }
      else if(element.name=="已处理"){
        color.push("#006EFF")
      }
      else if(element.name=="已结束"){
        color.push("grey")
      }
      data.push(tmpYData)
     }
     
   });
 }
  const option = {
      title: {
          text: title,
          padding: [10, 0, 0, 20],
          textStyle: {
              fontSize: 14,
              color: '#696969'
          },
          left:"center",
          bottom: '10rpx'
      },
      tooltip: {
          trigger: 'item',
          show:false,
          formatter: "{a} <br/>{b}: {c} ({d}%)"
      },
      legend:{
        top: '0%',
        left: 'center'
      },
      backgroundColor: "#000000",
      // color: color,
      animation: false,
      series: [
        {
          // name: 'Access From',
          type: 'pie',
          radius: ['20%', '60%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: true,
            position: 'inside',
            formatter: '{c}' 
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data:data
        }
      ]
  };
  chart.setOption(option)
}
// pages/main.ts
Page({

  /**
   * 页面的初始数据
   */
  data: {
    userInfo: {
      avatarUrl: wx.getStorageSync('avatar'),
      nickName:  wx.getStorageSync('nickName'),
    },
    bannerList:[
      "https://visitor.bjkangdeli.com:12812/download/avatar/BIo7QQ6LSiB3c708b6e1becf26def213916f047382c1.jpeg",
      "https://visitor.bjkangdeli.com:12812/download/avatar/BIo7QQ6LSiB3c708b6e1becf26def213916f047382c1.jpeg",
      "https://visitor.bjkangdeli.com:12812/download/avatar/BIo7QQ6LSiB3c708b6e1becf26def213916f047382c1.jpeg",
    ],
    ecDps: {
      lazyLoad: true
    },
    orderPercent1:[
      {
        name:"待处理",
        count:10
      },
      {
        name:"已处理",
        count:12
      },
      {
        name:"已结束",
        count:18
      },
    ],
    orderPercent2:[
      {
        name:"设备掉线",
        count:10
      },
      {
        name:"设备故障",
        count:12
      }
    ],
    orderPercent3:[
      {
        name:"正常处理中",
        count:10
      },
      {
        name:"过期未结束",
        count:12
      }
    ]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad() {
 
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    this.initChartData()
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  },
  async initChartData(){
    let result = await getChartData()
    // returnJson.put("chartType",countList1);
    // returnJson.put("chartStatus",countList2);
    // returnJson.put("chartOverline",overList);
    if(result.code == LENGYU_SUCCESS_CODE){
      this.setData({
        orderPercent1:result.data.chartType,
        orderPercent2:result.data.chartStatus,
        orderPercent3:result.data.chartOverline,
      })
    }

    let dpsChart = this.selectComponent('#dps-chart'); 
    this.init_one (this.data.orderPercent1,dpsChart,"工单类型")

    let dpsChart1 = this.selectComponent('#dps-chart1'); 
    this.init_one (this.data.orderPercent2,dpsChart1,"完成情况")
    let dpsChart2 = this.selectComponent('#dps-chart2'); 
    this.init_one (this.data.orderPercent3,dpsChart2,"超时统计")


    // let dpsChart3 = this.selectComponent('#dps-chart3'); 
    // this.init_one (this.data.orderPercent2,dpsChart3)
  },
  startCar(){
    wx.navigateTo({
      url: '../car/startcar/index',
    })
  },
  // takeCar(){
  //   wx.setStorageSync('carListType', "takeCar")
  //   wx.navigateTo({
  //     url: '../car/takecar/index',
  //   })
  // },
  // myCar(){
  //   wx.setStorageSync('carListType', "myCar")
  //   wx.navigateTo({
  //     url: '../car/takecar/index',
  //   })
  // },
  myTakeCar(){
    wx.navigateTo({
      url:"/pages/work-order/orderList/index?type=2",
    })
  },

  startOrder(){
    wx.navigateTo({
      url: '../work-order/start-order/index',
    })
  },
  init_one (characters:any,chart:any,title:string) {           //初始化第一个图表
    let that = this
    chart.init((canvas, width, height) => {
      const chart = echarts.init(canvas, null, {
            width: width,
            height: height
        });
        setPieOption(chart,characters,title)
        return chart;
    });
},
  waitwait(){
  wx.showToast({
                title: "好哥哥们稍等！",
                icon: 'error',
                duration: 2000
              })
  }
})